<template>
    <div>
        <TrainPage
            ref="TrainPageRef"
            :isCacheSearch="false"
            :searchConfig="searchConfig"
            :searchData.sync="searchData"
            :tableConfig="tableConfig"
            :beforeSearch="beforeSearch"
            :customize="false"
            sendUrl="get_day_push_tasks"
        >
            <template slot="_content" slot-scope="{ record }">
                <div
                    v-html="record._content"
                    :class="['my-class-c-' + record.my_type, record.note_link ? 'c-link' : '']"
                    @click="goToLink(record)"
                ></div>
            </template>
            <template slot="_time" slot-scope="{ record }">
                <div>
                    {{ getTimeC(record) }}
                </div>
            </template>
        </TrainPage>
        <DialogForm
            v-model="visable"
            v-if="visable"
            :grid="-1"
            :formConfig="formConfig"
            :rules="rules"
            :formData="formData"
            :beforeSubmit="beforeSubmit"
            apiKey="post_first_stage"
        >
        </DialogForm>
    </div>
</template>

<script>
export default {
    name: 'normal_pc_push_task',
    data() {
        return {
            searchConfig: [
                {
                    label: '日期',
                    type: 'datePicker',
                    modelName: '_time',
                    className: 'w-300'
                },
            ],
            searchData:{
                _time:this.klDateFormat(Date.now(), 'yyyy-MM-dd')
            },
            tableConfig: {
                isSelection: false,
                maxHeightFlag: false,
                stripe: true,
                filterData: ({ notes = [], pushTasks = [] } = {}) => {
                    let result = []
                    // 处理数据
                    result = pushTasks.map((item) => {
                        return {
                            ...item,
                            istask: true,
                            _type_name: this.pushDaskTypes.find((itey) => itey.value == item.type)
                                ?.label,
                            _content: item.content.replace(/\n/g, '<br>'),
                        }
                    })

                    result = [
                        ...result,
                        ...notes
                            .map((item) => {
                                return {
                                    ...item,
                                    istask: false,
                                    my_type: this.getMyType(item),
                                    _type_name: this.summaryTypeOptions.find(
                                        (itey) => itey.value == item.note_type,
                                    )?.label,
                                    _content: item.note_content.replace(/\n/g, '<br>'),
                                    _time: `任务结束时间【${this.klDateFormat(
                                        item.note_end_time,
                                        'yyyy-MM-dd hh:mm:ss',
                                    )}】`,
                                }
                            })
                            .sort((a, b) => {
                                return a.note_end_time - b.note_end_time
                            }),
                    ]
                    return result
                },

                columnObj: [
                    {
                        label: '分类',
                        props: '_type_name',
                        width: 200,
                    },
                    {
                        label: '内容',
                        props: '_content',
                        slot: '_content',
                    },
                    {
                        label: '时间',
                        props: '_time',
                        slot: '_time',
                        width: 300,
                    },
                ],
            },
        }
    },
    computed: {
        ...Vuex.mapState(['userdata', 'options']),

        pushDaskTypes() {
            let { options } = this
            if (!this.isObject(options)) {
                return []
            }

            return options.pushDaskTypes || []
        },
        summaryTypeOptions() {
            return this.options?.summaryTypeOptions || []
        },
    },
    methods: {
        getMyType({ note_begin_time, note_end_time } = {}) {
            const current = new Date().getTime()
            if (current - note_end_time > 0) {
                return 1
            }

            if (note_begin_time - current <= 0 && current - note_end_time <= 0) {
                return 2
            }
            if (note_begin_time - current > 0) {
                return 3
            }
        },
        goToLink({ note_link }) {
            if (!note_link) return
            this.goTo(note_link, {
                target: '_blank',
            })
        },
        getTimeC(row) {
            let oneDay = 24 * 60 * 60 * 1000
            let current = new Date().getTime()
            let { note_begin_time, note_end_time, istask = false, time, type } = row
            if (istask) {
                if (type == 4) {
                    return '--'
                }
                return time || '--'
            }

            if (note_begin_time - current > 0) {
                return `还有${Math.abs(Math.floor((note_begin_time - current) / oneDay))}天开始`
            }
            if (current - note_end_time > 0) {
                return `已结束${Math.abs(Math.floor((current - note_end_time) / oneDay))}天`
            }

            if (note_end_time - current > 0) {
                return `还有${Math.abs(Math.floor((note_end_time - current) / oneDay))}天结束`
            }
        },
        editorChange({ str, html }) {
            Object.assign(this.formData, {
                component_str: str,
                component_html: html,
            })
        },

        beforeSearch(data) {
            const { _time } = data
            if (_time) {
                data.time = new Date(_time).getTime()
                delete data._time
            }
            return data
        },
    },
}
</script>

<style lang="scss" scoped>
.my-class-c-1 {
    color: $danger;
}

.my-class-c-2 {
    color: $warning;
}

.my-class-c-3 {
    color: $success;
}
.c-link {
    color: $primary;
    cursor: pointer;
    text-decoration: underline;
}
</style>
